<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
import resize from "../../dashboard/mixins/resize";
var colorTypeArr = [
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(185, 150, 248, 0.3)'
      },
      {
        offset: 1,
        color: 'rgba(185, 150, 248, 0.8)'
      }
    ]
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(3, 194, 236, 0.3)'
      },
      {
        offset: 1,
        color: 'rgba(3, 194, 236, 0.8)'
      }
    ]
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(218, 57, 20, 0.3)'
      },
      {
        offset: 1,
        color: 'rgba(218, 57, 20, 0.8)'
      }
    ]
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(232, 190, 49, 0.3)'
      },
      {
        offset: 1,
        color: 'rgba(232, 190, 49, 0.8)'
      }
    ]
  }
];
const angle = 0;
export default {
  name: 'gaugue',
  mixins: [resize],
  props: {
    colorNumber: {
      type: Number,
      default: 1,
    },
    className: {
      type: String,
      default: "chart-dom",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    valueData: {
      type: Number,
      required: true,
    },
    unit: {
      type: String,
      default: "%",
    },
    type: {
      type: String,
      default: "",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);
      this.setOptions(this.valueData);
    },
    setOptions(data) {
      this.chart.setOption({
        title: [{
          top: '35%',
          left: 'center',
          text: this.type,
          textStyle: {
            color: '#ffffff',
            fontSize: this.fontSize(18),
          }
        },{
          text: '{a|' + data  + '}{c|' + this.unit + '}',
          top: '52%',
          left: 'center',
          textStyle: {
            rich: {
              a: {
                fontSize: this.fontSize(16),
                color: '#ffffff'
              },
              c: {
                fontSize: this.fontSize(14),
                color: '#ffffff',
                fontWeight: 'normal'
              }
            }
          }
        }],
        series: [
          //内环
          {
            name: "",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65,
                  startAngle: (0 + -angle) * Math.PI / 180,
                  endAngle: (360 + -angle) * Math.PI / 180
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 0.5
                },
                silent: true
              };
            },
            data: [0]
          },
          //外环
          {
            name: '',
            type: 'pie',
            radius: ['85%', '70%'],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: "center",
              }
            },
            data: [
              {
                value: 100,
                name: "",
                itemStyle: {
                  normal: {
                    //外环发光
                    borderWidth: 0.5,
                    shadowBlur: 6,
                    borderColor: colorTypeArr[this.colorNumber].colorStops[0],
                    shadowColor: colorTypeArr[this.colorNumber].colorStops[1],
                    color: colorTypeArr[this.colorNumber],
                  }
                }
              },
              /* {
                value: 100 - data,
                name: "",
                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#173164"
                  }
                }
              } */
            ]
          },
        ]
      });
    },
    fontSize(fontsize) {
      let clientWidth = Math.max(document.documentElement.clientWidth, 1366);
      return (clientWidth * fontsize) / 1920;
    },
  },
  watch: {
    valueData: {
      handler(val, old) {
        if (this.valueData) {
          this.$nextTick(() => {
            this.initChart();
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
}
</script>

<style></style>